<template>
	<div id="history">
		<div class="breadcrumb">
			<img src="../../../../static/img/appoinment_1.png" class="head_img">
			<span class="title">体测预约</span>
			<el-button size="small" type="text" @click="toTestData" class="top_btn_1">体测数据</el-button>
			<el-button size="small" type="text" @click="toStandards" class="top_btn">体测标准</el-button>
		</div>
		<div class="list">
			<div class="list_head">
				<span class="head_name">体测列表</span>
				<el-button class="add" type="primary" @click="newTest()">添加体测</el-button>
			</div>
			<el-row>
				<el-col :span="6" v-for="item in historyList" :key="item">
					<el-card class="mycard" @click.native="importFile(item)">
						<div style="padding: 14px;">
							<div class="testName" :title="item.name">{{item.name}}</div>
							<div class="mytime" :title='item.startTime + "~" + item.endTime'>{{item.startTime}}~{{item.endTime}}</div>
						</div>
					</el-card>
				</el-col>
			</el-row>
		</div>

	</div>
</template>

<script>
	import { mapState, mapActions } from "vuex";

	export default {
		data() {
			return {
				historyList: [],
				physicalTestId: ""
			};
		},
		mounted() {
			this.getHistoryList();
			this.physicalTestId = this.$util.getUrlParam("physicalTestId");
		},
		computed: mapState({ user: state => state.user }),
		methods: {
			//获取列表数据
			getHistoryList() {
				this.historyList = [];
				let url = this.$util.domain + "/physicaltest/physicaltestlist";

				this.$http({
					url,
					method: "POST"
				}).then(response => {
					if (response.data.error == 10000) {
						let historyList = response.data.data;
						if (historyList && historyList.length > 0) {
							for (let i = 0; i < historyList.length; i++) {
								let $index = i + 1,
									$name = historyList[i].name,
									$startTime = historyList[i].startTime,
									$id = historyList[i].id,
									$endTime = historyList[i].endTime;

								this.historyList.push({
									name: $name,
									index: $index,
									physicalTestId: $id,
									endTime: new Date($endTime).format("yyyy/MM/dd"),
									startTime: new Date($startTime).format("yyyy/MM/dd")
								});
							}
						}
					}
				});
			},
			//新增体测
			newTest() {
				location.href = "/#/newTest";
			},
			//删除体测
			deleteTest(row) {
				this.$confirm("您确定要删除“" + row.name + "”吗？", "温馨提示", {
					confirmButtonText: "确定",
					cancelButtonText: "取消"
				}).then(() => {
					let url = this.$util.domain + "/physicaltest/deletephysicaltest";

					this.$http({
						url,
						method: "POST",
						body: JSON.stringify({
							id: row.physicalTestId
						})
					}).then(response => {
						if (response.data.error == 10000) {
							this.$util.successMsg("删除成功");
							this.getHistoryList();
						} else {
							this.$util.errorMsg(response.data.message);
						}
					});
				}).catch(() => {
					//
				});
			},
			//导入预约
			importFile(row) {
				location.href = `/#/importFile?physicalTestId=${row.physicalTestId}&physicalName=${row.name}`;
			},
			toStandards() {
				location.href = "/#/standards";
			},
			toTestData() {
				location.href = "/#/dataStatistics";
			}
		}
	};
</script>

<style scoped>
	#history {
		padding-top: 80px;
		height: calc(100% - 100px);
	}

	#history .add {
		position: absolute;
		right: 0px;
	}

	#history .mycard {
		padding: 0px;
		height: 200px;
		background: #343f66;
		text-align: center;
		margin-left: 20px;
		border-radius: 8px;
		cursor: pointer;
		position: relative;
		margin-bottom: 20px;
		overflow: visible;
		background-image: url("../../../../static/img/test_icon.png");
		background-repeat: no-repeat;
		background-position: bottom right;
	}

	#history .mytime {
		font-size: 13px;
		color: #999;
		font-family: "PingFangSC-Regular";
		color: #ffffff;
		margin-top: 50px;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	#history .testName {
		text-align: center;
		font-family: "PingFangSC-Regular";
		font-size: 18px;
		color: #ffffff;
		width: 100%;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
</style>